<template>
    <div>
        <el-container >
            <el-header>
                <!-- <el-image
                    style="width: 100px; height: 100px"
                    :src="url"
                    fit='cover'></el-image> -->
                智能监测大屏监控
            </el-header>
            <el-main class="main">
                <el-row>
                    <el-col :span=8 class="grid-content">
                        <indexAlarm></indexAlarm>
                        <deviceAlarm></deviceAlarm>
                        <workAlarm></workAlarm>
                    </el-col>
                    <el-col :span=8 class="grid-content">
                        <lineChart></lineChart>
                    </el-col>
                    <el-col :span=8 class="grid-content">
                        <guagePH></guagePH>
                        <guageCOD></guageCOD>
                        <hubeiMap></hubeiMap>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import indexAlarm from '../vue/IndexAlarm.vue'
import deviceAlarm from '../vue/DeviceAlarm.vue'
import workAlarm from '../vue/WorkAlarm.vue'
import lineChart from '../vue/LineChart.vue'
import guagePH from '../vue/GuagePH.vue'
import guageCOD from '../vue/GuageCOD.vue'
import hubeiMap from '../vue/HubeiMap.vue'

export default {
    data: function() {
        return {
            url: '../background (1).png'
        }
    },
    components: {
        indexAlarm, deviceAlarm, workAlarm, lineChart, guagePH, guageCOD, hubeiMap
    }
}
</script>

<style>
/* .container {
    background-image: url('../images/background (1).png')
}
.header {
    text-align: center;
    font-size: 40px;
    color:blue
} */
</style>